<template>
  <div>
    <div class="rect1"></div>
    <div class="wrap">
      <div class="qk-title flex-row-center-center">
        <img src="@/assets/chevronRight.png" alt width="20" height="20" />
        <div class="qk-title-num flex-row-start-start">
          <div>气库地图</div>
        </div>
        <img src="@/assets/chevronleft.png" alt width="20" height="20" />
      </div>
      <div>
        <div
          class="flex-row-start-start"
          style="position: absolute; width: calc(47.05% - 8px); z-index: 10"
        >
          <div style="width: 45%; display: flex">
            <Select
              v-model="selKq"
              style="width: 100px; margin-top: 10px; margin-left: 10px"
              placeholder="整体"
              id="select_index"
            >
              <Option
                v-for="item in kqList"
                :key="item.type"
                :value="item.id"
                >{{ item.type }}</Option
              >
            </Select>
            <div
              style="height: 25px; margin-top: 10px; margin-left: 5px"
              v-if="showJz"
            >
              <Button @click="backTop">返回上层</Button>
            </div>
            <!-- 有故障暂时取消 -->
              <!-- <div
                      style="height: 25px; margin-top: 10px; margin-left: 5px"
                      v-if="showJz"
              >
                  <Button @click="switchHeapMap" >开启热力图</Button>
              </div> -->
          </div>
          <div
            style="width: 80%"
            class="flex-row-end-center"
            v-if="showEventType"
          >
            <div class="event-wrap">
              <div
                class="flex-row-start-center event-wrap-item"
                v-for="item in eventType"
                @click="changeEventType(item)"
              >
                <div class="event-wrap-item-title">{{ item.type }}</div>
                <div style="width: 50%" class="flex-row-end-center">
                  <div :class="{ eventImg: item.show }"></div>
                </div>
              </div>
            </div>
            <div class="location">
              <div style="display: flex; flex-direction: column; align-items: flex-start;">

              <input v-model="currentLat" placeholder="纬度" />
              <input v-model="currentLng" placeholder="经度" />
                <button @click="jumpToCoordinates" style="width: 155px">跳转</button>
              </div>
              <div style="background-color: grey;border-radius: 5px; margin-top: 5px; padding-top: 5px; padding-bottom: 5px">
                <span style="color: black; font-weight: bold; margin-right: 10px">拖移定位</span>
                <i-switch size="large" v-model="isOpenSwitchDragon">
                  <span slot="open">开启</span>
                  <span slot="close">关闭</span>
                </i-switch>
              </div>
            </div>
          </div>
        </div>
        <!-- <baidu-map :center="{lng:104.116729,lat:30.629222} " zoom="17" style="height:814px"></baidu-map> -->
        <div style="width: 100%; height: 774px" id="echarts">
          <div
            style="width: 100%; height: 774px"
            id="areaMap"
            v-show="selKq == '整体'"
          ></div>
          <div
            style="width: 100%; height: 774px"
            id="lzMap"
            v-show="selKq == 'LZ01'"
          ></div>
          <div
            style="width: 100%; height: 774px"
            id="jtMap"
            v-show="selKq == 'JT01'"
          ></div>
        </div>
      </div>
    </div>
    <div class="flex-row-center-end" style="color: #ffffff; margin-top: 61px">
      <div class="flex-row-start-center">
        <router-link
          :to="{
            name: 'dataManager',
            query: {
              name: 'index',
              selType: selTab,
              selKq: selKq,
              showJz: showJz,
              curJz: curJz,
            },
          }"
        >
          <div class="button-style" style="margin-left: 14px">数据管理</div>
        </router-link>
        <div class="date-style">{{ systemTime }}</div>
      </div>
    </div>
  </div>
</template>
<script>
// import "echarts/map/js/province/jiangsu.js"
import "echarts/extension/bmap/bmap";
import huaian from "../../../../static/jinhu"; //刘庄
import changzhou from "../../../../static/jintan.json";
import jiangsu from "../../../../static/jiangsu";

import BMap from "BMap";
import { throttle } from "@/script/common.js";
import axios from "axios";
export default {
  data() {
    return {
        heapData: [

        ],
        heapData1: [

        ],
      mapId: "areaMap",
      mapList: ["常州市", "淮安市"],
      kqList: [
        { type: "整体", id: "整体" },
        { type: "刘庄", id: "LZ01" },
        { type: "金坛", id: "JT01" },
      ],
      selKq: "",
      selTab: "库区信息",
      showJz: false,
      curKq: "",
      curJz: "",
      LZData: [],
      LZGeo: {},
      LZTotalData: [],
      JTTotalData: [],
      chart: null,
      eventType: [
        { type: "检测点", show: false, id: "jcd" },
        { type: "连通性", show: false, id: "xld" },
        { type: "井口示踪剂", show: false, id: "ck" },
        { type: "地表示踪剂", show: false, id: "hk" },
        { type: "环空示踪剂", show: false, id: "jk" },
      ],
      eventSel: ["jz", "jcd", "xld", "ck", "hk", "jk"],
      kqInfoList: [],
      centerPoint: [],
      showOverview: false,
      zoomValue: 17,
      showRoute: false,
        jcdList: null,
        openHeap: true,
      currentLat: "",
      currentLng: "",
      isOpenSwitchDragon: false
    };
  },
  props: {
    jzMapList: Array,
    selQk: String,
    showEventType: Boolean,
    showAllType: Boolean,
  },
  components: {},
  computed: {
    systemTime() {
      return this.$store.state.systemTime;
    },
    resize() {
      return this.$store.state.chartSize;
    },
    selJzId() {
      return this.$store.state.selJzId;
    }
  },
  mounted() {
    if (this.selQk == "整体") {
      this.chart = this.echarts.init(document.getElementById("areaMap"));
      console.log("整体地图初始化")
    } else if (this.selQk == "LZ01") {
      this.chart = this.echarts.init(document.getElementById("lzMap"));
    } else if (this.selQk == "JT01") {
      this.chart = this.echarts.init(document.getElementById("jtMap"));
    }
  },
  watch: {
    selJzId(jzId, oldVal) {
      let that = this;
      let o = {};
      o.name = jzId;
      o.showEventType = true;
      that.showJz = true;
      that.eventType = [
        { type: "检测点", show: true, id: "jcd" },
        { type: "连通性", show: false, id: "xld" },
        { type: "井口示踪剂", show: false, id: "ck" },
        { type: "地表示踪剂", show: false, id: "hk" },
        { type: "环空示踪剂", show: false, id: "jk" },
      ];
      that.$emit("change-to-jz", o);
      that.onGetSpecJzView(jzId, this.selKq);
    },
    selKq(val) {
      console.log("selKq",val)
      if (!this.showRoute) {
        this.showJz = false;
        this.changeMap(val, this.showJz);
        this.$emit("syn-o-selQk", val);
        this.$emit("change-to-kq",true)
        this.eventType = [
          { type: "检测点", show: false, id: "jcd" },
          { type: "连通性", show: false, id: "xld" },
          { type: "井口示踪剂", show: false, id: "ck" },
          { type: "地表示踪剂", show: false, id: "hk" },
          { type: "环空示踪剂", show: false, id: "jk" },
        ];
      } else {
        this.showRoute = !this.showRoute;
      }
    },
    selQk(val) {
      console.log("selQk",val)
      this.selKq = val;
      this.eventType = [
        { type: "检测点", show: false, id: "jcd" },
        { type: "连通性", show: false, id: "xld" },
        { type: "井口示踪剂", show: false, id: "ck" },
        { type: "地表示踪剂", show: false, id: "hk" },
        { type: "环空示踪剂", show: false, id: "jk" },
      ];
    },
    resize(val) {
      this.$nextTick(() => {
        this.chart.resize();
      });
    },
    showAllType(val) {
      if (val) {
        this.eventType = [
          { type: "检测点", show: false, id: "jcd" },
          { type: "连通性", show: false, id: "xld" },
          { type: "井口示踪剂", show: false, id: "ck" },
          { type: "地表示踪剂", show: false, id: "hk" },
          { type: "环空示踪剂", show: false, id: "jk" },
        ];
        this.getOverviewView();
      }
    },
    showJz(val) {
      if (val) {
        this.eventType = [
          { type: "检测点", show: true, id: "jcd" },
          { type: "连通性", show: false, id: "xld" },
          { type: "井口示踪剂", show: false, id: "ck" },
          { type: "地表示踪剂", show: false, id: "hk" },
          { type: "环空示踪剂", show: false, id: "jk" },
        ];
      }
      this.changeTab()
    },
  },
  methods: {
    backTop() {
      let val = this.selKq;
      this.showJz = false;
      this.changeMap(val, this.showJz);
      this.$emit("syn-o-selQk", val);
      this.eventType = [
        { type: "检测点", show: false, id: "jcd" },
        { type: "连通性", show: false, id: "xld" },
        { type: "井口示踪剂", show: false, id: "ck" },
        { type: "地表示踪剂", show: false, id: "hk" },
        { type: "环空示踪剂", show: false, id: "jk" },
      ];
      this.$emit("change-to-kq", false);
    },
    changeTab() {
      if (!this.showJz) {
        this.selTab = "库区信息";
      } else {
        this.selTab = "井组信息";
      }
    },
    changeEventType(val) {
      val.show = !val.show;
      if (this.showJz) {
        console.log("abcdefg2222")
        this.getSpecJzView(this.curJz, this.selKq);
      } else {
        this.getOverviewView();
      }
      //
      // if (this.selKq == "LZ01") {
      //   this.getHaMap();
      // } else if (this.selKq == "JT01") {
      //   this.getJtMap();
      // }
    },
    getOverviewView() {
      this.showOverview = true;
      let params = {};
      params.id = this.selKq;
      this.$axios({
        url: "/getOverviewView",
        type: "post",
        params: params,
      })
        .then((res) => {
          let data = res.data;
          let jzList = data.jzList;

          let jcdList = data.jcdList;
          let xlList = data.xlList;
          console.log("0000000xlList", xlList);

          let ckList = data.ckList;
          let hkList = data.hkList;
          let jkList = data.jkList;
          this.LZGeo = {};
          this.LZData = [];
          this.LZTotalData = [];
          let that = this;
          let jzArr = [];
          let xldArr = [];
          let jcdArr = [];
          let ckArr = [];
          let hkArr = [];
          let jkArr = [];
          jzList.forEach((item, index) => {
            that.LZGeo["" + item.jzId + ""] = [
              parseFloat(item.jzXpoint),
              parseFloat(item.jzYpoint),
            ];
            item.name = item.jzName;
            item.id = item.jzId;
            that.LZTotalData.push(item);
            jzArr.push(item);
          });
          this.LZData.push(jzArr);
          jcdList.forEach((item, index) => {
            that.LZGeo["" + item.jcdId + ""] = [
              parseFloat(item.jcdXpoint),
              parseFloat(item.jcdYpoint),
            ];
            item.name = item.jcdName;
            item.id = item.jcdId;
            that.LZTotalData.push(item);
            jcdArr.push(item);
          });
          this.LZData.push(jcdArr);
          xlList.forEach((item, index) => {
            that.LZGeo["" + item.xldId + ""] = [
              parseFloat(item.xldcXpoint),
              parseFloat(item.xldcYpoint),
            ];
            item.id = item.xldId;
            item.name = item.xldId;
            that.LZTotalData.push(item);
            that.LZData.push([item]);
          });
          ckList.forEach((item, index) => {
            that.LZGeo["" + item.ckId + ""] = [
              parseFloat(item.ckXpoint),
              parseFloat(item.ckYpoint),
            ];
            that.LZGeo["" + item.ckId + index + ""] = [
              parseFloat(item.ckXpoint),
              parseFloat(item.ckYpoint),
            ];
            item.id = item.ckId;
            item.name = item.ckId;
            item.showCkState = false;
            that.LZTotalData.push(item);
            that.LZData.push([item]);

            let item1 = JSON.parse(JSON.stringify(item));
            item1.id = item.ckId + index;
            item.name = item.ckId + index;
            item1.showCkState = true;
            that.LZTotalData.push(item1);
            that.LZData.push([item1]);
          });
          hkList.forEach((item, index) => {
            that.LZGeo["" + item.hkId + ""] = [
              parseFloat(item.hkXpoint),
              parseFloat(item.hkYpoint),
            ];
            item.name = item.hkId;
            item.id = item.hkId;
            that.LZTotalData.push(item);
            that.LZData.push([item]);
          });
          jkList.forEach((item, index) => {
            that.LZGeo["" + item.jkId + ""] = [
              parseFloat(item.jkXpoint),
              parseFloat(item.jkYpoint),
            ];
            item.name = item.jkId;
            item.id = item.jkId;
            that.LZTotalData.push(item);
            that.LZData.push([item]);
          });
          console.log(this.LZTotalData);
          if (this.selKq == "LZ01") {
            this.getHaMap();
          } else if (this.selKq == "JT01") {
            this.getJtMap();
          }
        })
        .catch((err) => {});
    },
    getSpecJzView(id, kqId) {
      this.showOverview = true;
      let params = {};
      params.id = id;
      params.kqId = kqId;
      this.$axios({
        url: "/getSpecJzView",
        type: "post",
        params: params,
      })
        .then((res) => {
          let data = res.data;
          let jzList = data.jzList;
          let jcdList = data.jcdList;
            this.jcdList = jcdList;
          let xlList = data.xlList;
          let ckList = data.ckList;
          let hkList = data.hkList;
          let jkList = data.jkList;
          this.LZGeo = {};
          this.LZData = [];
          this.LZTotalData = [];
          let that = this;
          let jzArr = [];
          let xldArr = [];
          let jcdArr = [];
          let ckArr = [];
          let hkArr = [];
          let jkArr = [];
          let sumXpoint = 0;
          let sumYpoint = 0;
          console.log(data);
          jzList.forEach((item, index) => {
            // that.LZGeo["" + item.jzId + ""] = [
            //   parseFloat(item.jzXpoint),
            //   parseFloat(item.jzYpoint),
            // ];
            // item.type = "jz";
            // item.id = item.jzId;
            // item.name = item.jzName;
            // if (id == item.jzId) {
            //   that.zoomValue = 18;
            //   that.centerPoint = [
            //     parseFloat(item.jzXpoint),
            //     parseFloat(item.jzYpoint),
            //   ];
            // }
            // that.LZTotalData.push(item);
            // jzArr.push(item);

            //暂时的更改，点击井组后，其他井组消失，同时只保留该井组监测点
            if (id == item.jzId) {
              that.LZGeo["" + item.jzId + ""] = [
                parseFloat(item.jzXpoint),
                parseFloat(item.jzYpoint),
              ];
            }
            item.type = "jz";
            item.id = item.jzId;
            item.name = item.jzName;
            if (id == item.jzId) {
              that.zoomValue = 18;
              that.centerPoint = [
                parseFloat(item.jzXpoint),
                parseFloat(item.jzYpoint),
              ];
              that.LZTotalData.push(item);
              jzArr.push(item);
            }
          });

          this.LZData.push(jzArr);
          jcdList.forEach((item, index) => {
            that.LZGeo["" + item.jcdId + ""] = [
              parseFloat(item.jcdXpoint),
              parseFloat(item.jcdYpoint),
            ];
            item.type = "jcd";
            item.name = item.jcdName;
            item.id = item.jcdId;
            that.LZTotalData.push(item);
            jcdArr.push(item);
          });
          if (jcdArr.length > 0) {
            this.LZData.push(jcdArr);
          }
          xlList.forEach((item, index) => {
            that.LZGeo["" + item.xldId + ""] = [
              parseFloat(item.xldcXpoint),
              parseFloat(item.xldcYpoint),
            ];
            item.type = "xld";
            item.name = item.xldId;
            item.id = item.xldId;
            that.LZTotalData.push(item);
            that.LZData.push([item]);
          });
          ckList.forEach((item, index) => {
            that.LZGeo["" + item.ckId + ""] = [
              parseFloat(item.ckXpoint),
              parseFloat(item.ckYpoint),
            ];
            // that.LZGeo["" + item.ckId + index + ""] = [
            //   parseFloat(item.ckXpoint),
            //   parseFloat(item.ckYpoint) - 0.00017,
            // ];
            item.type = "ck";
            item.name = item.ckId;
            item.id = item.ckId;
            item.showCkState = false;
            that.LZTotalData.push(item);
            that.LZData.push([item]);

            let item1 = JSON.parse(JSON.stringify(item));
            item1.name = item.ckId + index;
            item1.id = item.ckId + index;
            item1.showCkState = true;
            that.LZTotalData.push(item1);
            that.LZData.push([item1]);
          });
          hkList.forEach((item, index) => {
            that.LZGeo["" + item.hkId + ""] = [
              parseFloat(item.hkXpoint),
              parseFloat(item.hkYpoint),
            ];
            item.type = "hk";
            item.name = item.hkId;
            item.id = item.hkId;
            that.LZTotalData.push(item);
            that.LZData.push([item]);
          });
          jkList.forEach((item, index) => {
            that.LZGeo["" + item.jkId + ""] = [
              parseFloat(item.jkXpoint),
              parseFloat(item.jkYpoint),
            ];
            item.type = "jk";
            item.name = item.jkId;
            item.id = item.jkId;
            that.LZTotalData.push(item);
            that.LZData.push([item]);
          });
          if (this.selKq == "LZ01") {
            this.getHaMap();
          } else if (this.selKq == "JT01") {
            this.getJtMap();
          }
        })
        .catch((err) => {});
    },
    getSpecKqJzPoint() {
      let param = {};
      param.id = this.selKq;
      this.$axios({
        url: "/getSpecKqJzPoint",
        type: "post",
        params: param,
      })
        .then((res) => {
          this.LZData = [];
          this.LZGeo = {};
          this.LZTotalData = [];
          let data = res.data;
          let arr = [];
          let sumXpoint = 0;
          let sumYpoint = 0;
          let xArr = [];
          let yArr = [];
          for (let i = 0; i < data.length; i++) {
            let item = data[i];
            item.name = item.jzName;
            item.id = item.jzId;
            this.LZTotalData.push(item);
            this.LZGeo["" + item.jzId + ""] = [
              parseFloat(item.jzXpoint),
              parseFloat(item.jzYpoint),
            ];
            arr.push({
              name: item.jzName,
              value: i,
              type: "jz",
              id: item.jzId,
            });
            xArr.push(parseFloat(item.jzXpoint));
            yArr.push(parseFloat(item.jzYpoint));
            sumXpoint += parseFloat(item.jzXpoint);
            sumYpoint += parseFloat(item.jzYpoint);
          }
          this.centerPoint = [sumXpoint / xArr.length, sumYpoint / yArr.length];
          this.LZData.push(arr);
          if (this.selKq == "LZ01") {
            this.zoomValue = 16.5;
            this.$nextTick(function () {
              this.getHaMap();
            });
          } else if (this.selKq == "JT01") {
            this.zoomValue = 15.5;
            this.$nextTick(function () {
              this.getJtMap();
            });
          }
        })
        .catch((error) => {});
    },
    middle(val) {
      let args = val; //收集参数转为数组
      args.sort(); //排序
      if (args.length % 2 === 0) {
        //判断数字个数是奇数还是偶数
        return (args[args.length / 2] + args[args.length / 2 - 1]) / 2; //偶数个取中间两个数的平均数
      } else {
        return args[parseInt(args.length / 2)]; //奇数个取最中间那个数
      }
    },
    getSpecKqJcdPoint(val) {
      let param = {};
      param.id = val;
      this.$axios({
        url: "/getSpecKqJcdPoint",
        type: "post",
        params: param,
      })
        .then((res) => {
          let data = res.data;
          let arr = [];
          let sumXpoint = 0;
          let sumYpoint = 0;
          for (let i = 0; i < data.length; i++) {
            let item = data[i];
            item.type = "jcd";
            item.name = item.jcdName;
            item.id = item.jcdId;
            this.LZTotalData.push(item);
            this.LZGeo["" + item.jcdId + ""] = [
              parseFloat(item.jcdXpoint),
              parseFloat(item.jcdYpoint),
            ];
            arr.push(item);
            sumXpoint += parseFloat(item.jcdXpoint);
            sumYpoint += parseFloat(item.jcdYpoint);
          }
          this.centerPoint = [sumXpoint / data.length, sumYpoint / data.length];
          this.LZData.push(arr);
          if (this.selKq == "LZ01") {
            this.$nextTick(function () {
              this.getHaMap();
            });
          } else if (this.selKq == "JT01") {
            this.$nextTick(function () {
              this.getJtMap();
            });
          }
        })
        .catch((error) => {});
    },
    getSpecKqPoint() {
      let param = {};
      param.id = this.selKq;
      this.$axios({
        url: "/getSpecKqPoint",
        type: "post",
        params: param,
      })
        .then((res) => {
          let data = res.data;
          let index = 1;
          this.LZGeo = {};
          this.LZData = [];

          for (let i = 0; i < data.length; i++) {
            let item = data[i];
            this.LZGeo["" + item.jzId + ""] = [
              parseFloat(item.jzXpoint),
              parseFloat(item.jzYpoint),
            ];
            let arr = [];
            arr.push({ name: item.jzName, value: index, id: item.jzId });
            index++;
            for (let j = 0; j < item.jcdPointList.length; j++) {
              let ele = item.jcdPointList[j];
              arr.push({ name: ele.jcdName, value: index, id: ele.jcdId });
              this.LZGeo["" + ele.jcdId + ""] = [
                parseFloat(ele.jcdXpoint),
                parseFloat(ele.jcdYpoint),
              ];
              index++;
            }
            this.LZData.push(arr);
          }
          if (this.selKq == "LZ01") {
            this.$nextTick(function () {
              this.getHaMap();
            });
          } else if (this.selKq == "JT01") {
            this.$nextTick(function () {
              this.getJtMap();
            });
          }
        })
        .catch((error) => {});
    },
    changeMap(val, val2) {
      this.showJz = val2;
      if (val == "整体") {
        this.$nextTick(function () {
          this.getQkList();
        });
      } else if (val == "LZ01") {
        this.$nextTick(function () {
          if (val2) {
            this.eventType = [
              { type: "检测点", show: true, id: "jcd" },
              { type: "连通性", show: false, id: "xld" },
              { type: "井口示踪剂", show: false, id: "ck" },
              { type: "地表示踪剂", show: false, id: "hk" },
              { type: "环空示踪剂", show: false, id: "jk" },
            ];
            console.log("abcdef3333333")
            this.getSpecJzView(this.curJz, val);
          } else {
            this.getSpecKqJzPoint();
          }
        });
      } else if (val == "JT01") {
        this.$nextTick(function () {
          if (val2) {
            console.log("abcdefg111")
            this.getSpecJzView(this.curJz, val);
          } else {
            this.getSpecKqJzPoint();
          }
        });
      }
    },
    changeSelTab(val, val2, val3) {
      // this.curKq = val;
      // this.selKq = this.curKq;
      // this.showJz = val2;
      this.curJz = val3;
      this.showRoute = true;
      this.changeMap(val, val2);
    },
    getQkList() {
      this.$axios({
        url: "/getQkList",
        type: "get",
      })
        .then((res) => {
          let that = this;
          this.kqInfoList = res.data;
          this.kqInfoList.forEach((item) => {
            if (item.name == "刘庄") {
              item.name = "刘庄";
              item.value = "0";
              item.coords = [
                [119.016936, 33.018162],
                [119.116936, 33.518162],
              ];
            } else if (item.name == "金坛") {
              item.name = "金坛";
              item.value = "1";
              item.coords = [
                [119.573395, 31.744399],
                [119.873395, 32.1744399],
              ];
            }
          });
          this.getCityMap();
        })
        .catch((error) => {});
    },
    getCityMap() {
      let that = this;
      this.chart = null;
      let kqData = this.kqInfoList;
      this.chart = that.echarts.init(document.getElementById("areaMap"));
      let name = "qkArea";
      let geoCoordMap = {
        'LZ01': [119.016936, 33.018162],
        'JT01': [119.573395, 31.744399]
      };
      let convertData = function (data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let geoCoord = geoCoordMap[data[i].id];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        console.log(res)
        return res;
      };
      let option = null;
      option = {
        geo: {
          map: name,
          label: {
            normal: {
              show: false,
              textStyle: {
                color: "#fff",
                fontSize: 18,
              },
            },
            emphasis: {
              show: false,
              textStyle: {
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              borderWidth: 1,
              areaColor: "#c1c1c1",
              borderColor: "rgba(204,0,0,.24)",
            },
            emphasis: {
              areaColor: "#cc0000",
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData([
              { value: 62, name: "刘庄" , id: 'LZ01' },
              { value: 61, name: "金坛", id:'JT01' },
            ]),
            // symbolSize: 12,
            rippleEffect: {
              brushType: "fill",
              scale: 4,
              period: 2,
            },
            hoverAnimation: true,
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{b}",
                offset: [5, 0],
                color: "#cc0000",
                fontSize: 18,
              },
            },
          },
          {
            type: "lines",
            symbol: "circle",
            symbolSize: [5, 5],
            label: {
              show: true,
              backgroundColor: "rgba(11,21, 50, .5)",
              borderRadius: 4,
              padding: [10, 20, 10, 10],
              color: "#ffffff",
              align: "left",
              formatter: function (params) {
                return (
                  params.name +
                  "\n\n" +
                  "井组: " +
                  params.data.jzNum +
                  "个" +
                  "\n\n" +
                  "检测点: " +
                  params.data.jcdNum +
                  "个"
                );
              },
            },
            lineStyle: {
              type: "solid",
              opacity: 1,
              color: "#cc0000",
            },
            data: kqData,
          },
        ],
      };
      this.echarts.registerMap(name, jiangsu);
      this.chart.setOption(option);
      this.chart.on("click", function (params) {
        let selQk = "";
        if (params.name == "刘庄") {
          selQk = "LZ01";
          that.$emit("syn-o-selQk", selQk);
        } else if (params.name == "金坛") {
          selQk = "JT01";
          that.$emit("syn-o-selQk", selQk);
        }
      });
    },
    getHaMap() {
      let that = this;
      // if (this.chart != null) {
      //   this.chart.clear();
      // }

      let zoom = this.zoomValue;
      this.chart = that.echarts.init(document.getElementById("lzMap"));
      this.$store.state.chart = this.chart;
      let name = "haArea";
      let option = null;
      let geoCoordMap = this.LZGeo;
      let LZData = [];
      let centerPoint = this.centerPoint;
      //将需要显示的事故，推进数组
      if (this.showOverview) {
        console.log("bbbbbbbbbbb", that.LZData);
        LZData.push(that.LZData[0]);
        this.eventType.forEach((item) => {
          if (item.show) {
            let index = that.eventSel.indexOf(item.id);
            if (index > -1) {
              that.LZData.forEach((ele) => {
                if (ele.length > 0) {
                  if (ele[0].type == item.id) {
                    LZData.push(ele);
                  }
                }
              });
            }
          }
        });
      } else {
        console.log("lllllllllllll", that.LZData);
        LZData = this.LZData;
      }

      let convertData = function (data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let geoCoord = geoCoordMap[data[i].id];
          if (geoCoord) {
            res.push({
              id: data[i].id,
              name: data[i].name,
              type: data[i].type,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };
      let series = [];
      LZData.forEach((item, index) => {
        let color;
        let symbolIcon;
        let symbolSize = 20;
        let showLabel = true;
        if (item[0].type == "jz") {
          symbolSize = 50;
          color = "#c1ff00";
          symbolIcon =
            "path://M516.736 407.872c18.496 11.584 41.152 27.072 62.208 42.048 41.664 29.568 201.472 18.176 266.688 23.488C910.784 478.656 960 493.056 960 493.056l-90.88-150.784c0 0 98.496-147.776 86.336-144.704-12.032 3.072-73.408 4.544-113.6-6.784s-132.608-12.096-195.52-12.096c-46.656 0-103.424-40.128-129.536-60.8L516.8 67.264 443.2 67.264l0 784.96 73.536 0L516.736 407.872z M619.904 680.64l0 55.296c105.024 14.08 177.536 44.16 177.536 79.04 0 48.384-139.2 87.616-310.784 87.616s-310.72-39.232-310.72-87.616c0-34.176 69.696-63.744 171.2-78.208l0-55.488C182.272 700.608 64 753.28 64 814.976c0 78.336 189.184 141.76 422.656 141.76s422.656-63.424 422.656-141.76C909.248 752.448 787.968 699.328 619.904 680.64z";
        } else if (item[0].type == "jcd") {
          showLabel = false;
          color = "#f4ea2a";
          symbolIcon =
            "path://M1035.690747 460.197628l-201.082549 198.208997 47.496174 280.220819c6.837071 39.602164-19.388216 77.288628-58.527969 84.224787a71.244261 71.244261 0 0 1-46.042884-7.39857L528.657533 883.039085l-248.578723 132.150342a71.640613 71.640613 0 0 1-97.271371-30.585158c-7.36554-14.202611-9.908798-30.45304-7.233423-46.241059l47.430115-280.220819-201.082549-197.944763a73.523284 73.523284 0 0 1-1.222085-103.117563 71.805759 71.805759 0 0 1 41.154542-21.237857l278.007854-40.791221 124.190274-254.457943a71.442437 71.442437 0 0 1 128.847409 0l124.256332 254.722178 277.908766 40.79122c39.403988 5.614986 66.884389 42.475716 61.368491 82.375144-2.212965 15.821048-9.479417 30.48607-20.742418 41.716042z";
        } else if (item[0].type == "ck") {
          showLabel = false;
          if (item[0].dealSection == "未处理") {

              symbolIcon = "image://" + require("@/assets/up.png");

              symbolSize = 30;

          } else if (item[0].dealSection == "正在修理") {
            symbolIcon =
              "path://M704.248158 538.526615l-58.867281 54.506742-41.425125-34.884315L552.356036 508.729595l93.024841-90.117814a290.702626 290.702626 0 0 0 283.43506-31.977288 234.74237 234.74237 0 0 0 72.675656-167.880767L946.258094 199.858055l-110.466997 101.019163-159.159688-145.351313 110.466998-101.745919-23.982967-53.779986A302.330731 302.330731 0 0 0 582.879812 66.861604a208.579134 208.579134 0 0 0-41.425124 256.545067L437.528499 412.070972 300.171508 290.702626 292.177186 202.765082 161.361004 123.548616l-34.157558 34.884315-38.518098 34.884315-34.157559 31.977289 82.850249 119.914833 90.117814 6.540809 141.71753 123.548616L1.47456 799.432221a117.007807 117.007807 0 0 0 30.523776 98.838893 145.351313 145.351313 0 0 0 97.385379 25.43648L483.314163 581.405252l51.599716 44.33215 37.791341 34.884316-72.675656 72.675656c103.199432 95.20511 207.125621 193.317246 313.958836 290.702626A279.074521 279.074521 0 0 0 1018.933751 830.682754C915.007562 726.756565 811.80813 633.731725 704.248158 538.526615z m-563.236338 313.958836a46.51242 46.51242 0 0 1-62.501064 0 37.064585 37.064585 0 0 1 0-56.687012 46.51242 46.51242 0 0 1 62.501064 0 37.064585 37.064585 0 0 1 0 56.687012zM821.982722 944.783534L582.879812 722.396026l34.157559-31.250533 245.643718 224.567779-41.425124 25.43648z m86.484031-63.227821L662.823034 654.080908l34.884315-31.250532 238.376154 218.02697-27.61675 37.791341z";
            color = "#1afa29";
            symbolSize = 30;
          }
        } else if (item[0].type == "xld") {
          showLabel = false;
          if (item[0].dealSection == "正在修理") {
            symbolIcon =
              "path://M704.248158 538.526615l-58.867281 54.506742-41.425125-34.884315L552.356036 508.729595l93.024841-90.117814a290.702626 290.702626 0 0 0 283.43506-31.977288 234.74237 234.74237 0 0 0 72.675656-167.880767L946.258094 199.858055l-110.466997 101.019163-159.159688-145.351313 110.466998-101.745919-23.982967-53.779986A302.330731 302.330731 0 0 0 582.879812 66.861604a208.579134 208.579134 0 0 0-41.425124 256.545067L437.528499 412.070972 300.171508 290.702626 292.177186 202.765082 161.361004 123.548616l-34.157558 34.884315-38.518098 34.884315-34.157559 31.977289 82.850249 119.914833 90.117814 6.540809 141.71753 123.548616L1.47456 799.432221a117.007807 117.007807 0 0 0 30.523776 98.838893 145.351313 145.351313 0 0 0 97.385379 25.43648L483.314163 581.405252l51.599716 44.33215 37.791341 34.884316-72.675656 72.675656c103.199432 95.20511 207.125621 193.317246 313.958836 290.702626A279.074521 279.074521 0 0 0 1018.933751 830.682754C915.007562 726.756565 811.80813 633.731725 704.248158 538.526615z m-563.236338 313.958836a46.51242 46.51242 0 0 1-62.501064 0 37.064585 37.064585 0 0 1 0-56.687012 46.51242 46.51242 0 0 1 62.501064 0 37.064585 37.064585 0 0 1 0 56.687012zM821.982722 944.783534L582.879812 722.396026l34.157559-31.250533 245.643718 224.567779-41.425124 25.43648z m86.484031-63.227821L662.823034 654.080908l34.884315-31.250532 238.376154 218.02697-27.61675 37.791341z";
            color = "#1afa29";
            symbolSize = 30;
          } else if (item[0].dealSection == "未处理") {
            symbolIcon =
              "image://";
            color = "#1afa29";
            symbolSize = 30;
          }
        } else if (item[0].type == "hk") {
          showLabel = false;
          if (item[0].dealSection == "正在修理") {
            color = "c1ff00";
            symbolIcon =
              "path://M704.248158 538.526615l-58.867281 54.506742-41.425125-34.884315L552.356036 508.729595l93.024841-90.117814a290.702626 290.702626 0 0 0 283.43506-31.977288 234.74237 234.74237 0 0 0 72.675656-167.880767L946.258094 199.858055l-110.466997 101.019163-159.159688-145.351313 110.466998-101.745919-23.982967-53.779986A302.330731 302.330731 0 0 0 582.879812 66.861604a208.579134 208.579134 0 0 0-41.425124 256.545067L437.528499 412.070972 300.171508 290.702626 292.177186 202.765082 161.361004 123.548616l-34.157558 34.884315-38.518098 34.884315-34.157559 31.977289 82.850249 119.914833 90.117814 6.540809 141.71753 123.548616L1.47456 799.432221a117.007807 117.007807 0 0 0 30.523776 98.838893 145.351313 145.351313 0 0 0 97.385379 25.43648L483.314163 581.405252l51.599716 44.33215 37.791341 34.884316-72.675656 72.675656c103.199432 95.20511 207.125621 193.317246 313.958836 290.702626A279.074521 279.074521 0 0 0 1018.933751 830.682754C915.007562 726.756565 811.80813 633.731725 704.248158 538.526615z m-563.236338 313.958836a46.51242 46.51242 0 0 1-62.501064 0 37.064585 37.064585 0 0 1 0-56.687012 46.51242 46.51242 0 0 1 62.501064 0 37.064585 37.064585 0 0 1 0 56.687012zM821.982722 944.783534L582.879812 722.396026l34.157559-31.250533 245.643718 224.567779-41.425124 25.43648z m86.484031-63.227821L662.823034 654.080908l34.884315-31.250532 238.376154 218.02697-27.61675 37.791341z";
          } else if (item[0].dealSection == "未处理") {
            color = "#cc0000";
            symbolIcon =
              "image://";
          }

          symbolSize = 30;
        } else if (item[0].type == "jk") {
          showLabel = false;
          color = "#cc0000";
          symbolIcon =
            "path://M587.707733 239.121067c-13.124267-70.843733-68.215467-136.448-162.679466-191.5392h-10.513067s-2.628267 0-2.628267 2.628266h-2.628266l-2.628267 2.628267-2.628267 2.628267v10.496s0 2.628267 2.628267 2.628266v2.628267c39.355733 65.604267 23.620267 141.687467-47.223467 228.283733-13.124267 15.735467-31.488 34.116267-52.48 57.719467-52.48 44.612267-99.703467 94.464-125.952 136.448-34.116267 49.851733-44.612267 107.5712-31.488 160.0512 15.735467 68.215467 70.843733 131.191467 162.679467 183.671467 2.628267 2.628267 5.239467 2.628267 7.867733 2.628266 2.628267 0 5.256533 0 7.867734-2.628266 2.628267-2.628267 5.239467-2.628267 5.239466-5.239467v-10.513067c0-2.628267 0-2.628267-2.628266-2.628266v-2.628267c-52.48-76.100267 0-162.679467 34.116266-204.663467l2.628267-2.628266c34.116267-44.612267 68.215467-78.711467 97.092267-110.199467 20.992-20.992 39.355733-39.355733 55.108266-60.347733 57.7536-70.8608 78.7456-136.448 68.2496-199.424zM899.9424 428.032c-13.124267-65.604267-62.976-125.952-149.5552-175.803733h-10.513067c-2.628267 0-2.628267 0-2.628266 2.628266h-2.628267l-2.628267 2.628267-2.628266 2.628267v10.496s0 2.628267 2.628266 2.628266v2.628267c36.727467 57.719467 20.992 125.952-41.984 204.663467-10.496 13.124267-28.859733 31.488-47.223466 52.48-39.355733 39.355733-83.968 86.596267-107.5712 125.952-28.859733 44.612267-39.355733 97.092267-28.859734 146.944 15.735467 62.976 65.604267 118.0672 149.5552 167.936 2.628267 2.628267 5.256533 2.628267 7.867734 2.628266 2.628267 0 5.239467 0 7.867733-2.628266 2.628267-2.628267 5.256533-2.628267 5.256533-5.239467v-10.513067s0-2.628267-2.628266-2.628266v-2.628267c-44.612267-68.215467 0-144.315733 31.488-183.671467l2.628266-2.628266c31.488-41.984 60.347733-73.472 89.207467-99.703467 18.363733-18.363733 36.727467-36.727467 49.851733-52.48 44.629333-70.8608 62.993067-128.580267 52.497067-186.3168z";
          symbolSize = 30;
        }

        series.push({
          type: "scatter",
          coordinateSystem: "bmap",
          label: {
            normal: {
              show: showLabel,
              position: "top",
              formatter: "{b}",
              fontSize: 18,
            },
            emphasis: {
              color: "#cc0000",
              fontSize: 24,
            },
          },
          // hoverAnimation: true,
          symbol: symbolIcon,
          symbolSize: symbolSize,
          itemStyle: {
            normal: {
              color: color,
              fontSize: 30,
            },
          },
          emphasis: {
            itemStyle: {
              color: "#cc0000",
              shadowColor: "#cc0000",
              symbolSize: 100,
              areaColor: "#0E1216",
            },
          },
          data: convertData(item),
        });
      });

      this.$store.state.series = series;

      option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
          formatter: function (params) {
            let type;
            let selItem;
            console.log("ppppppppp")
            console.log(params)
            that.LZTotalData.forEach((item) => {
              if (item.name == params.name && item.type == params.data.type) {
                type = item.type;
                selItem = item;
              }
            });
            let info;


            if (type == "jz") {
              info = "井组: " + params.name+
                  "</br>" +
                  "位置坐标: " +
                  "(" +
                  parseFloat(selItem.jzXpoint).toFixed(6) +
                  "," +
                  parseFloat(selItem.jzYpoint).toFixed(6) +
                  ")";
            } else if (type == "jcd") {
              info =
                "检测点名称: " +
                params.name +
                "</br>" +
                "检测点编号: " +
                selItem.id +
                "</br>" +
                "检测数值: " +
                selItem.jcValue +
                "</br>" +
                "更新时间：" +
                selItem.updateTime +
                "</br>" +
                "位置坐标: " +
                "(" +
                parseFloat(selItem.jcdXpoint) +
                "," +
                parseFloat(selItem.jcdYpoint) +
                ")";
            } else if (
              type == "xld" ||
              type == "hk" ||
              type == "ck" ||
              type == "jk"
            ) {
              let eventType = "连通性";
              if (type == "xld") {
                eventType = "连通性";
              } else if (type == "hk") {
                eventType = "地表示踪剂";
              } else if (type == "ck") {
                eventType = "井口示踪剂";
              } else if (type == "jk") {
                eventType = "环空示踪剂";
              }
              info =
                  "类型:" + eventType +
                  "</br>" +
                  "检测数值:" +selItem.jcValue +
                  "</br>" +
                  "检测时间: " +
                  selItem.startTime;
            }
            return info;
          },
          textStyle: {
            align: "left",
          },
        },
        bmap: {
          center: centerPoint,
          zoom: zoom,
          roam: true,
          mapStyle: {
            styleJson: BMAP_SATELLITE_MAP, //地图样式配制
          },
        },
        series: series,
      };
      this.echarts.registerMap(name, huaian);
      this.chart.setOption(option, true);


      let draggingPoint = null;
      var bMap =  this.chart.getModel().getComponent('bmap').getBMap();
      bMap.setMapType(BMAP_SATELLITE_MAP);
      this.chart.off("mousedown");
      this.chart.off("mousemove");
      this.chart.off("mouseup");
      // 监听 mousedown 事件：按下鼠标
      this.chart.on('mousedown', (params) => {
        if (!this.isOpenSwitchDragon) {
          return
        }
        if (params.seriesType === 'scatter') {
          draggingPoint =  {
            seriesIndex: params.seriesIndex,
            dataIndex: params.dataIndex
          };
          bMap.disableDragging()// 记录被点击的点的索引
        }
      });

      // 监听 mousemove 事件：鼠标移动
      this.chart.getZr().on('mousemove', (event) => {
        if (!this.isOpenSwitchDragon) {
          return
        }

        if (!draggingPoint || draggingPoint.seriesIndex === undefined || series[draggingPoint.seriesIndex] === undefined) {
          return;
        }

        if (draggingPoint !== null) {
          var pixel = new BMap.Pixel(event.offsetX, event.offsetY);
          var point = bMap.pixelToPoint(pixel);

          if (!series[draggingPoint.seriesIndex]) {
            return;
          }

          var data = series[draggingPoint.seriesIndex].data;  // 获取 series 数据
          data[draggingPoint.dataIndex].value = [point.lng, point.lat];  // 更新被拖动的点的坐标

          this.currentLat = point.lat;  // 获取纬度
          this.currentLng = point.lng;  // 获取经度
          // 更新图表显示
          this.chart.setOption({
            series: series
          });
        }
      });

      // 监听 mouseup 事件：松开鼠标
      this.chart.getZr().on('mouseup', () => {
        if (!this.isOpenSwitchDragon) {
          return
        }
        if (!draggingPoint || draggingPoint.seriesIndex === undefined || series[draggingPoint.seriesIndex] === undefined) {
          return;
        }
        if (series[draggingPoint.seriesIndex]["symbolSize"] == 50) {
          this.$axios.post(
            "/jz/updateLocation",
            {
              jzId: series[draggingPoint.seriesIndex].data[draggingPoint.dataIndex]["id"],
              jkXpoint: this.currentLng,
              jkYpoint: this.currentLat,
            },
          ).then((res) => {
            console.log(res);
          }).catch((error) => {});
        }

        if (series[draggingPoint.seriesIndex]["symbolSize"] == 20) {
          this.$axios.post(
              "/jcd/updateLocation",
              {
                jcdId: series[draggingPoint.seriesIndex].data[draggingPoint.dataIndex]["id"],
                jcdXpoint: this.currentLng,
                jcdYpoint: this.currentLat,
              },
          ).then((res) => {
            console.log(res);
          }).catch((error) => {});
        }

        draggingPoint = null;
      });


      var bmap = this.chart.getModel().getComponent('bmap').getBMap();

      // 添加鼠标点击事件监听，获取点击位置的经纬度
      bmap.addEventListener('click', (e) => {
        this.currentLat =  e.point.lat;  // 获取纬度
        this.currentLng =  e.point.lng;  // 获取经度
      });

      this.chart.off("click");
      this.chart.on("click", function (params) {
        let id;

        for (let i = 0; i < that.LZTotalData.length; i++) {
          let item = that.LZTotalData[i];
          if (item.id === params.data.id && params.data.type === 'jz') {
            id = item.id;
          }

          if (item.id === params.data.id && params.data.type === 'jcd') {
            that.$emit("click-jcd", item);
          }
        }
        if (id.length <= 7) {
          that.showJz = true;
          that.eventType = [
            { type: "检测点", show: true, id: "jcd" },
            { type: "连通性", show: false, id: "xld" },
            { type: "井口示踪剂", show: false, id: "ck" },
            { type: "地表示踪剂", show: false, id: "hk" },
            { type: "环空示踪剂", show: false, id: "jk" },
          ];
          that.curJz = id;
          let o = {};
          o.name = id;
          o.showEventType = true;
          console.log("-----=========)))))")
          that.$emit("change-to-jz", o);
          that.onGetSpecJzView(id, that.selKq);
        }
      });
    },
    getJtMap() {
      let that = this;
      if (this.chart != null) {
        this.chart.clear();
      }
      let zoom = this.zoomValue;
      this.chart = that.echarts.init(document.getElementById("jtMap"));
      let name = "jtArea";
      let option = null;
      let geoCoordMap = this.LZGeo;
      let LZData = [];
      let centerPoint = this.centerPoint;

      //将需要显示的事故，推进数组
      if (this.showOverview) {
        console.log("bbbbbbbbbbb", that.LZData);
        LZData.push(that.LZData[0]);
        this.eventType.forEach((item) => {
          if (item.show) {
            let index = that.eventSel.indexOf(item.id);
            if (index > -1) {
              that.LZData.forEach((ele) => {
                if (ele.length > 0) {
                  if (ele[0].type == item.id) {
                    LZData.push(ele);
                  }
                }
              });
            }
          }
        });
      } else {
        console.log("lllllllllllll", that.LZData);
        LZData = this.LZData;
      }

      // if (this.showOverview) {
      //   LZData.push(that.LZData[0]);
      //   this.eventType.forEach((item) => {
      //     if (item.show) {
      //       let index = that.eventSel.indexOf(item.id);
      //       if (index == 1) {
      //         that.LZData.forEach((ele) => {
      //           if (ele.length > 0) {
      //             if (ele[0].type == item.id) {
      //               LZData.push(ele);
      //             }
      //           }
      //         });
      //       } else if (index > 1) {
      //           this.heapData = [];
      //           for (let i = 1; i < that.LZData.length; i++) {
      //               let temp = that.LZData[i];
      //               if (temp[0].type == item.id) {
      //                   let jcValue = temp[0].jcValue;
      //                   console.log("wwwwww", jcValue);
      //                   let valueArr = jcValue.split("E");
      //                   let small = Number(valueArr[0]);
      //                   let big = Number(valueArr[1]);
      //                   if (small === 0) {
      //                       this.heapData1.push([
      //                           temp[0].xldcXpoint,
      //                           temp[0].xldcYpoint,
      //                           70
      //                           // small * Math.pow(10, big + 16) + 50
      //                       ])
      //                   }else {
      //                       this.heapData.push([
      //                           temp[0].xldcXpoint,
      //                           temp[0].xldcYpoint,
      //                           (small * Math.pow(10, big + 15)) + 470
      //                           // small * Math.pow(10, big + 16) + 50
      //                       ])
      //                   }
      //             LZData.push(temp);
      //           }
      //         }
      //       }
      //     }
      //   });
      // } else {
      //   LZData = this.LZData;
      // }
      let convertData = function (data) {
        let res = [];
        console.log("======9999999", data, geoCoordMap)
        for (let i = 0; i < data.length; i++) {
          let geoCoord = geoCoordMap[data[i].id];
          if (geoCoord) {
            res.push({
              id: data[i].id,
              name: data[i].name,
              type: data[i].type,
              value: geoCoord,
            });
          }
        }
        return res;
      };
      console.log("lzDDDDAta", LZData);
      let series = [];
      LZData.forEach((item, index) => {
        let color;
        let symbolIcon;
        // let symbolIcon =
        //   "image://";
        let symbolSize = 20;
        let showLabel = true;
        if (item[0].type == "jz") {
          symbolSize = 50;
          color = "#c1ff00";
          // symbolIcon =
          //   "image://";
          symbolIcon =
            "path://M516.736 407.872c18.496 11.584 41.152 27.072 62.208 42.048 41.664 29.568 201.472 18.176 266.688 23.488C910.784 478.656 960 493.056 960 493.056l-90.88-150.784c0 0 98.496-147.776 86.336-144.704-12.032 3.072-73.408 4.544-113.6-6.784s-132.608-12.096-195.52-12.096c-46.656 0-103.424-40.128-129.536-60.8L516.8 67.264 443.2 67.264l0 784.96 73.536 0L516.736 407.872z M619.904 680.64l0 55.296c105.024 14.08 177.536 44.16 177.536 79.04 0 48.384-139.2 87.616-310.784 87.616s-310.72-39.232-310.72-87.616c0-34.176 69.696-63.744 171.2-78.208l0-55.488C182.272 700.608 64 753.28 64 814.976c0 78.336 189.184 141.76 422.656 141.76s422.656-63.424 422.656-141.76C909.248 752.448 787.968 699.328 619.904 680.64z";
        } else if (item[0].type == "jcd") {
          showLabel = false;
          color = "#f4ea2a";
          symbolIcon =
            "path://M1035.690747 460.197628l-201.082549 198.208997 47.496174 280.220819c6.837071 39.602164-19.388216 77.288628-58.527969 84.224787a71.244261 71.244261 0 0 1-46.042884-7.39857L528.657533 883.039085l-248.578723 132.150342a71.640613 71.640613 0 0 1-97.271371-30.585158c-7.36554-14.202611-9.908798-30.45304-7.233423-46.241059l47.430115-280.220819-201.082549-197.944763a73.523284 73.523284 0 0 1-1.222085-103.117563 71.805759 71.805759 0 0 1 41.154542-21.237857l278.007854-40.791221 124.190274-254.457943a71.442437 71.442437 0 0 1 128.847409 0l124.256332 254.722178 277.908766 40.79122c39.403988 5.614986 66.884389 42.475716 61.368491 82.375144-2.212965 15.821048-9.479417 30.48607-20.742418 41.716042z";
        } else if (item[0].type == "ck") {
          showLabel = false;
          if (item[0].dealSection == "未处理") {
              symbolIcon = "image://" + require("@/assets/up.png");
              color = "";
              symbolSize = 30;
          } else
            if (item[0].dealSection == "正在修理") {
            symbolIcon =
              "path://M704.248158 538.526615l-58.867281 54.506742-41.425125-34.884315L552.356036 508.729595l93.024841-90.117814a290.702626 290.702626 0 0 0 283.43506-31.977288 234.74237 234.74237 0 0 0 72.675656-167.880767L946.258094 199.858055l-110.466997 101.019163-159.159688-145.351313 110.466998-101.745919-23.982967-53.779986A302.330731 302.330731 0 0 0 582.879812 66.861604a208.579134 208.579134 0 0 0-41.425124 256.545067L437.528499 412.070972 300.171508 290.702626 292.177186 202.765082 161.361004 123.548616l-34.157558 34.884315-38.518098 34.884315-34.157559 31.977289 82.850249 119.914833 90.117814 6.540809 141.71753 123.548616L1.47456 799.432221a117.007807 117.007807 0 0 0 30.523776 98.838893 145.351313 145.351313 0 0 0 97.385379 25.43648L483.314163 581.405252l51.599716 44.33215 37.791341 34.884316-72.675656 72.675656c103.199432 95.20511 207.125621 193.317246 313.958836 290.702626A279.074521 279.074521 0 0 0 1018.933751 830.682754C915.007562 726.756565 811.80813 633.731725 704.248158 538.526615z m-563.236338 313.958836a46.51242 46.51242 0 0 1-62.501064 0 37.064585 37.064585 0 0 1 0-56.687012 46.51242 46.51242 0 0 1 62.501064 0 37.064585 37.064585 0 0 1 0 56.687012zM821.982722 944.783534L582.879812 722.396026l34.157559-31.250533 245.643718 224.567779-41.425124 25.43648z m86.484031-63.227821L662.823034 654.080908l34.884315-31.250532 238.376154 218.02697-27.61675 37.791341z";
            color = "#1afa29";
            symbolSize = 30;
          } else if (item[0].dealSection == "已修复") {
            symbolIcon =
              "path://M704.248158 538.526615l-58.867281 54.506742-41.425125-34.884315L552.356036 508.729595l93.024841-90.117814a290.702626 290.702626 0 0 0 283.43506-31.977288 234.74237 234.74237 0 0 0 72.675656-167.880767L946.258094 199.858055l-110.466997 101.019163-159.159688-145.351313 110.466998-101.745919-23.982967-53.779986A302.330731 302.330731 0 0 0 582.879812 66.861604a208.579134 208.579134 0 0 0-41.425124 256.545067L437.528499 412.070972 300.171508 290.702626 292.177186 202.765082 161.361004 123.548616l-34.157558 34.884315-38.518098 34.884315-34.157559 31.977289 82.850249 119.914833 90.117814 6.540809 141.71753 123.548616L1.47456 799.432221a117.007807 117.007807 0 0 0 30.523776 98.838893 145.351313 145.351313 0 0 0 97.385379 25.43648L483.314163 581.405252l51.599716 44.33215 37.791341 34.884316-72.675656 72.675656c103.199432 95.20511 207.125621 193.317246 313.958836 290.702626A279.074521 279.074521 0 0 0 1018.933751 830.682754C915.007562 726.756565 811.80813 633.731725 704.248158 538.526615z m-563.236338 313.958836a46.51242 46.51242 0 0 1-62.501064 0 37.064585 37.064585 0 0 1 0-56.687012 46.51242 46.51242 0 0 1 62.501064 0 37.064585 37.064585 0 0 1 0 56.687012zM821.982722 944.783534L582.879812 722.396026l34.157559-31.250533 245.643718 224.567779-41.425124 25.43648z m86.484031-63.227821L662.823034 654.080908l34.884315-31.250532 238.376154 218.02697-27.61675 37.791341z";
            color = "#0ed145";
            symbolSize = 30;
          }
        } else if (item[0].type == "xld") {
          showLabel = false;
          if (item[0].dealSection == "正在修理") {
            symbolIcon =
              "path://M704.248158 538.526615l-58.867281 54.506742-41.425125-34.884315L552.356036 508.729595l93.024841-90.117814a290.702626 290.702626 0 0 0 283.43506-31.977288 234.74237 234.74237 0 0 0 72.675656-167.880767L946.258094 199.858055l-110.466997 101.019163-159.159688-145.351313 110.466998-101.745919-23.982967-53.779986A302.330731 302.330731 0 0 0 582.879812 66.861604a208.579134 208.579134 0 0 0-41.425124 256.545067L437.528499 412.070972 300.171508 290.702626 292.177186 202.765082 161.361004 123.548616l-34.157558 34.884315-38.518098 34.884315-34.157559 31.977289 82.850249 119.914833 90.117814 6.540809 141.71753 123.548616L1.47456 799.432221a117.007807 117.007807 0 0 0 30.523776 98.838893 145.351313 145.351313 0 0 0 97.385379 25.43648L483.314163 581.405252l51.599716 44.33215 37.791341 34.884316-72.675656 72.675656c103.199432 95.20511 207.125621 193.317246 313.958836 290.702626A279.074521 279.074521 0 0 0 1018.933751 830.682754C915.007562 726.756565 811.80813 633.731725 704.248158 538.526615z m-563.236338 313.958836a46.51242 46.51242 0 0 1-62.501064 0 37.064585 37.064585 0 0 1 0-56.687012 46.51242 46.51242 0 0 1 62.501064 0 37.064585 37.064585 0 0 1 0 56.687012zM821.982722 944.783534L582.879812 722.396026l34.157559-31.250533 245.643718 224.567779-41.425124 25.43648z m86.484031-63.227821L662.823034 654.080908l34.884315-31.250532 238.376154 218.02697-27.61675 37.791341z";
            color = "#1afa29";
            symbolSize = 30;
          } else if (item[0].dealSection == "未处理") {
            symbolIcon =
              "image://";
            color = "#1afa29";
            symbolSize = 30;
          } else if (item[0].dealSection == "已修复") {
            symbolIcon =
              "path://M704.248158 538.526615l-58.867281 54.506742-41.425125-34.884315L552.356036 508.729595l93.024841-90.117814a290.702626 290.702626 0 0 0 283.43506-31.977288 234.74237 234.74237 0 0 0 72.675656-167.880767L946.258094 199.858055l-110.466997 101.019163-159.159688-145.351313 110.466998-101.745919-23.982967-53.779986A302.330731 302.330731 0 0 0 582.879812 66.861604a208.579134 208.579134 0 0 0-41.425124 256.545067L437.528499 412.070972 300.171508 290.702626 292.177186 202.765082 161.361004 123.548616l-34.157558 34.884315-38.518098 34.884315-34.157559 31.977289 82.850249 119.914833 90.117814 6.540809 141.71753 123.548616L1.47456 799.432221a117.007807 117.007807 0 0 0 30.523776 98.838893 145.351313 145.351313 0 0 0 97.385379 25.43648L483.314163 581.405252l51.599716 44.33215 37.791341 34.884316-72.675656 72.675656c103.199432 95.20511 207.125621 193.317246 313.958836 290.702626A279.074521 279.074521 0 0 0 1018.933751 830.682754C915.007562 726.756565 811.80813 633.731725 704.248158 538.526615z m-563.236338 313.958836a46.51242 46.51242 0 0 1-62.501064 0 37.064585 37.064585 0 0 1 0-56.687012 46.51242 46.51242 0 0 1 62.501064 0 37.064585 37.064585 0 0 1 0 56.687012zM821.982722 944.783534L582.879812 722.396026l34.157559-31.250533 245.643718 224.567779-41.425124 25.43648z m86.484031-63.227821L662.823034 654.080908l34.884315-31.250532 238.376154 218.02697-27.61675 37.791341z";
            color = "#0ed145";
            symbolSize = 30;
          }
        } else if (item[0].type == "hk") {
          showLabel = false;
          if (item[0].dealSection == "正在修理") {
            color = "c1ff00";
            symbolIcon =
              "path://M704.248158 538.526615l-58.867281 54.506742-41.425125-34.884315L552.356036 508.729595l93.024841-90.117814a290.702626 290.702626 0 0 0 283.43506-31.977288 234.74237 234.74237 0 0 0 72.675656-167.880767L946.258094 199.858055l-110.466997 101.019163-159.159688-145.351313 110.466998-101.745919-23.982967-53.779986A302.330731 302.330731 0 0 0 582.879812 66.861604a208.579134 208.579134 0 0 0-41.425124 256.545067L437.528499 412.070972 300.171508 290.702626 292.177186 202.765082 161.361004 123.548616l-34.157558 34.884315-38.518098 34.884315-34.157559 31.977289 82.850249 119.914833 90.117814 6.540809 141.71753 123.548616L1.47456 799.432221a117.007807 117.007807 0 0 0 30.523776 98.838893 145.351313 145.351313 0 0 0 97.385379 25.43648L483.314163 581.405252l51.599716 44.33215 37.791341 34.884316-72.675656 72.675656c103.199432 95.20511 207.125621 193.317246 313.958836 290.702626A279.074521 279.074521 0 0 0 1018.933751 830.682754C915.007562 726.756565 811.80813 633.731725 704.248158 538.526615z m-563.236338 313.958836a46.51242 46.51242 0 0 1-62.501064 0 37.064585 37.064585 0 0 1 0-56.687012 46.51242 46.51242 0 0 1 62.501064 0 37.064585 37.064585 0 0 1 0 56.687012zM821.982722 944.783534L582.879812 722.396026l34.157559-31.250533 245.643718 224.567779-41.425124 25.43648z m86.484031-63.227821L662.823034 654.080908l34.884315-31.250532 238.376154 218.02697-27.61675 37.791341z";
          } else if (item[0].dealSection == "未处理") {
            symbolIcon =
              "image://";
          } else if (item[0].dealSection == "已修复") {
            color = "#0ed145";
            symbolIcon =
              "path://M704.248158 538.526615l-58.867281 54.506742-41.425125-34.884315L552.356036 508.729595l93.024841-90.117814a290.702626 290.702626 0 0 0 283.43506-31.977288 234.74237 234.74237 0 0 0 72.675656-167.880767L946.258094 199.858055l-110.466997 101.019163-159.159688-145.351313 110.466998-101.745919-23.982967-53.779986A302.330731 302.330731 0 0 0 582.879812 66.861604a208.579134 208.579134 0 0 0-41.425124 256.545067L437.528499 412.070972 300.171508 290.702626 292.177186 202.765082 161.361004 123.548616l-34.157558 34.884315-38.518098 34.884315-34.157559 31.977289 82.850249 119.914833 90.117814 6.540809 141.71753 123.548616L1.47456 799.432221a117.007807 117.007807 0 0 0 30.523776 98.838893 145.351313 145.351313 0 0 0 97.385379 25.43648L483.314163 581.405252l51.599716 44.33215 37.791341 34.884316-72.675656 72.675656c103.199432 95.20511 207.125621 193.317246 313.958836 290.702626A279.074521 279.074521 0 0 0 1018.933751 830.682754C915.007562 726.756565 811.80813 633.731725 704.248158 538.526615z m-563.236338 313.958836a46.51242 46.51242 0 0 1-62.501064 0 37.064585 37.064585 0 0 1 0-56.687012 46.51242 46.51242 0 0 1 62.501064 0 37.064585 37.064585 0 0 1 0 56.687012zM821.982722 944.783534L582.879812 722.396026l34.157559-31.250533 245.643718 224.567779-41.425124 25.43648z m86.484031-63.227821L662.823034 654.080908l34.884315-31.250532 238.376154 218.02697-27.61675 37.791341z";
          } else {
            symbolIcon =
              "image://";
          }
          color = "#cc0000";
          symbolSize = 30;
        } else if (item[0].type == "jk") {
          showLabel = false;
          color = "#cc0000";
          symbolIcon =
            "path://M587.707733 239.121067c-13.124267-70.843733-68.215467-136.448-162.679466-191.5392h-10.513067s-2.628267 0-2.628267 2.628266h-2.628266l-2.628267 2.628267-2.628267 2.628267v10.496s0 2.628267 2.628267 2.628266v2.628267c39.355733 65.604267 23.620267 141.687467-47.223467 228.283733-13.124267 15.735467-31.488 34.116267-52.48 57.719467-52.48 44.612267-99.703467 94.464-125.952 136.448-34.116267 49.851733-44.612267 107.5712-31.488 160.0512 15.735467 68.215467 70.843733 131.191467 162.679467 183.671467 2.628267 2.628267 5.239467 2.628267 7.867733 2.628266 2.628267 0 5.256533 0 7.867734-2.628266 2.628267-2.628267 5.239467-2.628267 5.239466-5.239467v-10.513067c0-2.628267 0-2.628267-2.628266-2.628266v-2.628267c-52.48-76.100267 0-162.679467 34.116266-204.663467l2.628267-2.628266c34.116267-44.612267 68.215467-78.711467 97.092267-110.199467 20.992-20.992 39.355733-39.355733 55.108266-60.347733 57.7536-70.8608 78.7456-136.448 68.2496-199.424zM899.9424 428.032c-13.124267-65.604267-62.976-125.952-149.5552-175.803733h-10.513067c-2.628267 0-2.628267 0-2.628266 2.628266h-2.628267l-2.628267 2.628267-2.628266 2.628267v10.496s0 2.628267 2.628266 2.628266v2.628267c36.727467 57.719467 20.992 125.952-41.984 204.663467-10.496 13.124267-28.859733 31.488-47.223466 52.48-39.355733 39.355733-83.968 86.596267-107.5712 125.952-28.859733 44.612267-39.355733 97.092267-28.859734 146.944 15.735467 62.976 65.604267 118.0672 149.5552 167.936 2.628267 2.628267 5.256533 2.628267 7.867734 2.628266 2.628267 0 5.239467 0 7.867733-2.628266 2.628267-2.628267 5.256533-2.628267 5.256533-5.239467v-10.513067s0-2.628267-2.628266-2.628266v-2.628267c-44.612267-68.215467 0-144.315733 31.488-183.671467l2.628266-2.628266c31.488-41.984 60.347733-73.472 89.207467-99.703467 18.363733-18.363733 36.727467-36.727467 49.851733-52.48 44.629333-70.8608 62.993067-128.580267 52.497067-186.3168z";
          symbolSize = 30;
        }

        series.push({
          type: "scatter",
          coordinateSystem: "bmap",
          label: {
            normal: {
              show: showLabel,
              position: "top",
              formatter: "{b}",
              fontSize: 18,
            },
            emphasis: {
              color: "#cc0000",
              fontSize: 24,
            },
          },
          // hoverAnimation: true,
          symbol: symbolIcon,
          symbolSize: symbolSize,
          itemStyle: {
            normal: {
              color: color,
              fontSize: 30,
            },
          },
          emphasis: {
            itemStyle: {
              color: "#cc0000",
              shadowColor: "#cc0000",
              symbolSize: 100,
            },
          },
          data: convertData(item),
        });
      });

      option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
          formatter: function (params) {
            let type;
            let selItem;
            that.LZTotalData.forEach((item) => {
              if (item.name == params.name && item.type == params.data.type) {
                type = item.type;
                selItem = item;
              }
            });
            let info;
            if (type == "jz") {
              info = "井组: " + params.name+
                  "</br>" +
                  "位置坐标: " +
                  "(" +
                  parseFloat(selItem.jzXpoint).toFixed(6) +
                  "," +
                  parseFloat(selItem.jzYpoint).toFixed(6) +
                  ")";
            } else if (type == "jcd") {
              info =
                "检测点名称: " +
                params.name +
                "</br>" +
                "检测点编号: " +
                selItem.id +
                "</br>" +
                "检测数值: " +
                selItem.jcValue +
                "</br>" +
                "更新时间：" +
                selItem.updateTime +
                "</br>" +
                "位置坐标: " +
                "(" +
                parseFloat(selItem.jcdXpoint) +
                "," +
                parseFloat(selItem.jcdYpoint) +
                ")";
            } else if (
              type == "xld" ||
              type == "hk" ||
              type == "ck" ||
              type == "jk"
            ) {
              let eventType = "连通性";
              if (type == "xld") {
                eventType = "连通性";
              } else if (type == "hk") {
                eventType = "地表示踪剂";
              } else if (type == "ck") {
                eventType = "井口示踪剂";
              } else if (type == "jk") {
                eventType = "环空示踪剂";
              }
              info =
                "类型:" + eventType +
                "</br>" +
                  "检测数值:" +selItem.jcValue +
                "</br>" +
                "检测时间: " +
                selItem.startTime;
            }
            return info;
          },
          textStyle: {
            align: "left",
          },
        },
        bmap: {
          center: centerPoint,
          zoom: zoom,
          roam: true,
          mapStyle: {
            styleJson: BMAP_SATELLITE_MAP, //地图样式配制
          }
        },
        series: series,
      };

      this.echarts.registerMap(name, changzhou);
      this.chart.setOption(option, true);

      let draggingPoint = null;
      var bMap =  this.chart.getModel().getComponent('bmap').getBMap();
      bMap.setMapType(BMAP_SATELLITE_MAP);
      // 监听 mousedown 事件：按下鼠标
      this.chart.off("mousedown");
      this.chart.off("mousemove");
      this.chart.off("mouseup");
      this.chart.on('mousedown', (params) => {
        if (!this.isOpenSwitchDragon) {
          return;
        }
        if (params.seriesType === 'scatter') {
          draggingPoint =  {
            seriesIndex: params.seriesIndex,
            dataIndex: params.dataIndex
          };
          bMap.disableDragging()// 记录被点击的点的索引
        }
      });

      // 监听 mousemove 事件：鼠标移动
      this.chart.getZr().on('mousemove', (event) => {
        if (!this.isOpenSwitchDragon) {
          return;
        }

        if (!draggingPoint || draggingPoint.seriesIndex === undefined || series[draggingPoint.seriesIndex] === undefined) {
          return;
        }

        if (draggingPoint !== null) {
          var pixel = new BMap.Pixel(event.offsetX, event.offsetY);
          var point = bMap.pixelToPoint(pixel);

          var data = series[draggingPoint.seriesIndex].data;  // 获取 series 数据
          data[draggingPoint.dataIndex].value = [point.lng, point.lat];  // 更新被拖动的点的坐标

          this.currentLat = point.lat;  // 获取纬度
          this.currentLng = point.lng;  // 获取经度
          // 更新图表显示
          this.chart.setOption({
            series: series
          });
        }
      });

      // 监听 mouseup 事件：松开鼠标
      this.chart.getZr().on('mouseup', () => {
        if (!this.isOpenSwitchDragon) {
          return;
        }
        if (!draggingPoint || draggingPoint.seriesIndex === undefined || series[draggingPoint.seriesIndex] === undefined) {
          return;
        }
        if (series[draggingPoint.seriesIndex]["symbolSize"] == 50) {
          this.$axios.post(
              "/jz/updateLocation",
              {
                jzId: series[draggingPoint.seriesIndex].data[draggingPoint.dataIndex]["id"],
                jkXpoint: this.currentLng,
                jkYpoint: this.currentLat,
              },
          ).then((res) => {
            console.log(res);
          }).catch((error) => {});
        }

        if (series[draggingPoint.seriesIndex]["symbolSize"] == 20) {
          this.$axios.post(
              "/jcd/updateLocation",
              {
                jcdId: series[draggingPoint.seriesIndex].data[draggingPoint.dataIndex]["id"],
                jcdXpoint: this.currentLng,
                jcdYpoint: this.currentLat,
              },
          ).then((res) => {
            console.log(res);
          }).catch((error) => {});
        }
        draggingPoint = null;
      });


      var bmap = this.chart.getModel().getComponent('bmap').getBMap();

      // 添加鼠标点击事件监听，获取点击位置的经纬度
      bmap.addEventListener('click', (e) => {
        this.currentLat =  e.point.lat;  // 获取纬度
        this.currentLng =  e.point.lng;  // 获取经度
      });

      this.chart.off("click");
      this.chart.on("click", function (params) {
        let id;
        for (let i = 0; i < that.LZTotalData.length; i++) {
          let item = that.LZTotalData[i];
          if (item.id === params.data.id && params.data.type === 'jz') {
            id = item.id;
          }

          if (item.id === params.data.id && params.data.type === 'jcd') {
            that.$emit("click-jcd", item);
          }
        }
        if (id.length <= 7) {
          that.showJz = true;
          that.eventType = [
            { type: "检测点", show: true, id: "jcd" },
            { type: "连通性", show: false, id: "xld" },
            { type: "井口示踪剂", show: false, id: "ck" },
            { type: "地表示踪剂", show: false, id: "hk" },
            { type: "环空示踪剂", show: false, id: "jk" },
          ];
          that.curJz = id;
          let o = {};
          o.name = id;
          o.showEventType = true;
          that.$emit("change-to-jz", o);
          console.log("cccccccccccccc", params)
          that.onGetSpecJzView(id, that.selKq);
        }
      });
    },
    onGetSpecJzView(name, selKq) {
      this.getSpecJzView(name, selKq)
    },
      switchHeapMap() {
          let isShow = false;
          for (let i = 1; i <= 4; i++) {
              if (this.eventType[i].show === true) {
                  isShow = true;
                  break;
              }
          }

          // this.openHeap = !this.openHeap;
          if (isShow) {
              let heapMapData = [];
              console.log(this.jcdList)
              this.jcdList.map((item) => {
                  heapMapData.push([item.jcdXpoint, item.jcdYpoint, item.jcValue]);
              });
              // this.chart = this.echarts.init(document.getElementById("jtMap"));
              let option = {
                  visualMap:[ {
                      type: 'continuous',
                      show: true,
                      top: 'top',
                      min: 0,
                      max: 1000,
                      seriesIndex: 0,
                      calculable: true,
                      inRange: {
                          // color: ['#FFFA4D', '#F9D923', '#FE6244', '#ED2B2A', '#DC3535', '#D21312']
                          color: ['yellow', 'yellow', 'orange',  'red', 'red']

                      },
                  },{
                      type: 'continuous',
                      show: false,
                      top: 'top',
                      seriesIndex: 1,
                      calculable: true,
                      inRange: {
                          color: ['blue']

                      }}],
                  series: [
                      {
                          type: 'heatmap',
                          coordinateSystem: 'bmap',
                          data: this.heapData,
                          pointSize: 30,
                          blurSize: 20
                      },
                      {
                          type: 'heatmap',
                          coordinateSystem: 'bmap',
                          data: this.heapData1,
                          pointSize: 30,
                          blurSize: 20
                      }
                  ]
              };

              this.chart.setOption(option, false);
          }
          // else {
          //     this.chart.clear();
          // }
      },
    jumpToCoordinates() {
      this.chart.getModel().getComponent('bmap').getBMap().panTo(new BMap.Point(this.currentLng, this.currentLat));
    },
  }
};
</script>
<style  scoped>
.button-style {
  width: 142px;
  height: 37px;
  line-height: 37px;
  border-radius: 4px;
  background-color: #f1f1f1;
  font-size: 14px;
  text-align: center;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(187, 187, 187, 1);
  color: black;
}
.date-style {
  color: black;
  font-size: 18px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  margin-left: 231px;
}
.qk-title {
  height: 43px;
  background-color: rgba(5, 29, 63, 100);
  text-align: center;
}
.qknum-content-value {
  color: black;
  font-size: 48px;
  text-align: center;
}
.qknum-content-unit {
  color: rgba(35, 125, 191, 100);
  font-size: 20px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}

.qknum-content-value {
  width: 100%;
  height: 45px;
  line-height: 20px;
  background-color: rgba(9, 48, 104, 100);
  text-align: center;
  /* border: 1px solid  rgba(9, 48, 104, 100); */
}
.qknum-content {
  width: 56.81%;
  height: 93px;
  border-top: 1px solid rgba(28, 103, 166, 100);
  border-bottom: 1px solid rgba(28, 103, 166, 100);
}
.qk-title-num {
  color: black;
  font-size: 20px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  margin-left: 39px;
  margin-right: 39px;
}
.qk-title {
  width: 100%;
  height: 43px;
  line-height: 20px;
  background-color: #cc0000;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;

  /* border: 1px solid rgba(255, 255, 255, 100); */
  /* margin-left: 1.5px;
  margin-top: 1.5px; */
}

.wrap {
  width: 100%;
  height: 814px;
  line-height: 20px;
  opacity: 0.82;
  background-color: transparent;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(255, 157, 160, 60);
  font-family: Roboto;
  border: 1px solid #c5565a;
}
.event-wrap {
  border-radius: 4px;
  background: #c3c3c3;
  margin-right: 10px;
  margin-top: 10px;
  width: 150px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.event-wrap-item-title {
  width: 50%;
}
.eventImg {
  background: url("../../../assets/right.png");
  background-size: cover;
  width: 18px;
  height: 18px;
  margin-right: 10px;
}
.event-wrap-item:hover {
  background: rgba(204, 0, 0, 0.12);
  cursor: pointer;
}
.tip-wrap {
  width: 80px;
  height: 60px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
</style>